<!DOCTYPE html>



  


<html class="theme-next mist use-motion" lang="zh-cn">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.3" rel="stylesheet" type="text/css" />


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.3">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.3">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.3">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.3" color="#222">





  <meta name="keywords" content="前端,vue,angular,react " />










<meta name="description" content="前端">
<meta property="og:type" content="website">
<meta property="og:title" content="博客">
<meta property="og:url" content="https://zhousg.github.io/index.html">
<meta property="og:site_name" content="博客">
<meta property="og:description" content="前端">
<meta property="og:locale" content="zh-cn">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="博客">
<meta name="twitter:description" content="前端">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Mist',
    version: '5.1.3',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: 'Author'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://zhousg.github.io/"/>





  <title>博客</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-cn">

  
  
    
  

  <div class="container sidebar-position-left 
  page-home">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">博客</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <h1 class="site-subtitle" itemprop="description">挑战人生无极限，攀登人生更高峰</h1>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-首页">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-目录">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            目录
          </a>
        </li>
      
        
        <li class="menu-item menu-item-关于">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            
  <section id="posts" class="posts-expand">
    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://zhousg.github.io/2017/11/28/移动web开发/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Tony zhou">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="博客">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2017/11/28/移动web开发/" itemprop="url">移动web开发</a></h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Veröffentlicht am</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2017-11-28T12:56:44+08:00">
                2017-11-28
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <blockquote>
<p>掌握移动端常见适配方案<br>能够理解移动端常见效果<br>能够独立完成响应式开发<br>掌握CSS预编译脚本语言</p>
</blockquote>
<h3 id="《京东项目》"><a href="#《京东项目》" class="headerlink" title="《京东项目》"></a>《京东项目》</h3><h5 id="移动web开发现状"><a href="#移动web开发现状" class="headerlink" title="移动web开发现状"></a>移动web开发现状</h5><ul>
<li>移动web开发指的是需要适配移动设备的页面开发</li>
<li>移动web和桌面web没有本质的区别都使用css、html与js</li>
<li><p>那么在移动端开发页面需要注意什么：</p>
<ul>
<li><p>移动端浏览器</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，其他杂牌浏览器</div><div class="line">国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自助研发的内核，就像国内的手机操作系统都是基于Android修改的</div></pre></td></tr></table></figure>
</li>
<li><p>移动设备尺寸</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">大家都知道移动端设备屏幕尺寸非常多，碎片化严重。</div><div class="line">尤其是Android，你会听到很多种分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且还有传说中的2K,4k屏。</div><div class="line">近年来iPhone的碎片化也加剧了：640x960, 640x1136, 750x1334, 1242x2208。</div></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ul>
<h5 id="移动端适配问题"><a href="#移动端适配问题" class="headerlink" title="移动端适配问题"></a>移动端适配问题</h5><table>
<thead>
<tr>
<th>设备</th>
<th>尺寸(英寸)</th>
<th>开发尺寸(px)</th>
<th>物理像素比(dpr)</th>
</tr>
</thead>
<tbody>
<tr>
<td>iphone3G</td>
<td>3.5</td>
<td>320*480</td>
<td>1.0</td>
</tr>
<tr>
<td>iphone4/4s</td>
<td>3.5</td>
<td>320*480</td>
<td>2.0</td>
</tr>
<tr>
<td>iphone5/5s/5c</td>
<td>4.0</td>
<td>320*568</td>
<td>2.0</td>
</tr>
<tr>
<td>HTC One M8</td>
<td>4.5</td>
<td>360*640</td>
<td>3.0</td>
</tr>
<tr>
<td>iphone6</td>
<td>4.7</td>
<td>375*667</td>
<td>2.0</td>
</tr>
<tr>
<td>Nexus 4</td>
<td>4.7</td>
<td>384*640</td>
<td>2.0</td>
</tr>
<tr>
<td>Nexus 5x</td>
<td>5.2</td>
<td>411*731</td>
<td>2.6</td>
</tr>
<tr>
<td>iphone6 Plus</td>
<td>5.5</td>
<td>414*736</td>
<td>3.0</td>
</tr>
<tr>
<td>Samsung Galaxy Note 4</td>
<td>5.7</td>
<td>480*853</td>
<td>3.0</td>
</tr>
<tr>
<td>Sony Xperia Z Ultra</td>
<td>6.4</td>
<td>540*960</td>
<td>2.0</td>
</tr>
<tr>
<td>Nexus 7 (‘12)</td>
<td>7.0</td>
<td>600*960</td>
<td>1.3</td>
</tr>
<tr>
<td>iPad Mini</td>
<td>7.9</td>
<td>768*1024</td>
<td>1.0</td>
</tr>
</tbody>
</table>
<p>注：以上数据均参考 <a href="https://material.io/devices/" target="_blank" rel="external">https://material.io/devices/</a> ,一个设备尺寸统计网站。<br>注：作为前端开发不建议大家去纠结dp,dpi,pt,ppi等单位,因为它们有复杂的转换关系。</p>
<h5 id="流式布局"><a href="#流式布局" class="headerlink" title="流式布局"></a>流式布局</h5><ul>
<li>流式布局,就是百分比布局,也称非固定像素布局。</li>
<li>通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。</li>
<li>这样的布局方式,是移动web开发使用的最常用布局方式。</li>
</ul>
<h5 id="viewport"><a href="#viewport" class="headerlink" title="viewport"></a>viewport</h5><p>解释：视觉窗口<br>作用：这是一个虚拟的区域，用来承载网页的区域，在浏览器可视窗口和网页之间。<br>现象：有一些设备viewport的默认宽度是980px,网页内容显示在里面，为了能在320px屏幕内显示，会自动缩放。<br>在移动端有特殊的功能：可以设置宽度和高度，可以设置缩放比例，控制缩放的比例，控制用户是否可以自行缩放。  </p>
<p>适配有三点事情需要去做：</p>
<ol>
<li>页面的宽度和设备样宽</li>
<li>默认的缩放比例是1.0</li>
<li>不允许用户去缩放页面</li>
</ol>
<table>
<thead>
<tr>
<th>属性</th>
<th>解释</th>
</tr>
</thead>
<tbody>
<tr>
<td>width</td>
<td>宽度设置的是viewport宽度，可以设置device-width特殊值</td>
</tr>
<tr>
<td>initial-scale</td>
<td>初始缩放比，大于0的数字</td>
</tr>
<tr>
<td>maximum-scale</td>
<td>最大缩放比，大于0的数字</td>
</tr>
<tr>
<td>minimum-scale</td>
<td>最小缩放比，大于0的数字</td>
</tr>
<tr>
<td>user-scalable</td>
<td>用户是否可以缩放，yes或no（1或0）</td>
</tr>
</tbody>
</table>
<p>标准的viewport设置：</p>
<ul>
<li>视口宽度和设备保持一致</li>
<li>视口的默认缩放比例1.0</li>
<li>不允许用户自行缩放</li>
<li>最大允许的缩放比例1.0</li>
<li>最小允许的缩放比例1.0<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h5 id="物理像素比"><a href="#物理像素比" class="headerlink" title="物理像素比"></a>物理像素比</h5><ul>
<li>物理像素点指的是屏幕显示的最小颗，是物理真实存在的。</li>
<li>所谓Retina是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。</li>
<li>而一个px的绝对（在开发中认为是绝对）长度能显示的物理像素点的个数，称为物理像素比，屏幕像素比。</li>
</ul>
<p><img src=""></p>
<h5 id="图片失真问题"><a href="#图片失真问题" class="headerlink" title="图片失真问题"></a>图片失真问题</h5><p>在标准的viewport设置中，使用二倍图来提高图片质量，解决在高清设备模糊问题。<br><figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line">    <span class="selector-class">.box</span>&#123;</div><div class="line">        <span class="comment">/*原始图片100*100px*/</span></div><div class="line">        <span class="attribute">background-size</span>: <span class="number">50px</span> <span class="number">50px</span>;</div><div class="line">    &#125;</div><div class="line">    <span class="selector-tag">img</span>&#123;</div><div class="line">        <span class="comment">/*原始图片100*100px*/</span></div><div class="line">        <span class="attribute">width</span>: <span class="number">50px</span>;</div><div class="line">        <span class="attribute">height</span>: <span class="number">50px</span>;</div><div class="line">    &#125;</div><div class="line">```    </div><div class="line">##### 移动端<span class="selector-tag">css</span>问题</div><div class="line"></div><div class="line">```<span class="selector-tag">text</span></div><div class="line">        <span class="comment">/* 禁用客户端软件的字号调整 */</span></div><div class="line">        <span class="selector-tag">-webkit-text-size-adjust</span>: 100%;</div><div class="line">        <span class="comment">/* 解决IOS默认滑动很卡的情况 */</span></div><div class="line">        <span class="selector-tag">-webkit-overflow-scrolling</span> : <span class="selector-tag">touch</span>;</div><div class="line">        <span class="comment">/* 解决点击高亮效果 */</span></div><div class="line">        <span class="selector-tag">-webkit-tap-highlight-color</span>: <span class="selector-tag">transparent</span>;</div><div class="line">        <span class="comment">/* 设置元素的尺寸计算从边框开始 */</span></div><div class="line">        <span class="selector-tag">-webkit-box-sizing</span><span class="selector-pseudo">:border-box</span>;</div><div class="line">         <span class="comment">/* 清除表单控件默认样式 */</span></div><div class="line">        <span class="selector-tag">-webkit-appearance</span>: <span class="selector-tag">none</span>;</div></pre></td></tr></table></figure></p>
<h5 id="首页布局"><a href="#首页布局" class="headerlink" title="首页布局"></a>首页布局</h5><p>代码见案例《jdM》</p>
<h5 id="移动端touch事件"><a href="#移动端touch事件" class="headerlink" title="移动端touch事件"></a>移动端touch事件</h5><table>
<thead>
<tr>
<th>事件</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>touchstart</td>
<td>当手指触碰屏幕时候触发该事件</td>
</tr>
<tr>
<td>touchmove</td>
<td>当手指在屏幕上滑动时候触发该事件</td>
</tr>
<tr>
<td>touchend</td>
<td>当手指离开屏幕时触发该事件</td>
</tr>
<tr>
<td>touchcancel</td>
<td>当系统停止跟踪（被迫终止）触摸时候会触发。</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>触摸点集合</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>targetTouches</td>
<td>目标元素的所有当前触摸点集合</td>
</tr>
<tr>
<td>changedTouches</td>
<td>目标元素的最新更改的触摸点集合</td>
</tr>
<tr>
<td>touches</td>
<td>页面上的所有触摸点集合</td>
</tr>
</tbody>
</table>
<p>注意：在touchend事件的时候event只会记录changedtouches</p>
<table>
<thead>
<tr>
<th>点坐标</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>pageX/pageY</td>
<td>基于页面大小的坐标</td>
</tr>
<tr>
<td>clientX/clientY</td>
<td>基于视口大小的坐标</td>
</tr>
<tr>
<td>screenX/screenY</td>
<td>基于屏幕大小的坐标</td>
</tr>
</tbody>
</table>
<h5 id="京东轮播图"><a href="#京东轮播图" class="headerlink" title="京东轮播图"></a>京东轮播图</h5><p>代码见案例《jdM》</p>
<h5 id="衍生的tap事件"><a href="#衍生的tap事件" class="headerlink" title="衍生的tap事件"></a>衍生的tap事件</h5><p>出现的原因：由于早期移动端页面双击可以缩放，为了检测双击操作，延长了click的响应时间，200-300ms。</p>
<p>第一种解决方案：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/*模拟tap事件（tap在移动端库zepto.js有使用）*/</span></div><div class="line"><span class="comment">/*1. 响应的速度比click要快   150ms */</span></div><div class="line"><span class="comment">/*2. 不能滑动*/</span></div><div class="line"><span class="keyword">var</span> bindTapEvent = <span class="function"><span class="keyword">function</span> (<span class="params">dom, callback</span>) </span>&#123;</div><div class="line">    <span class="keyword">var</span> startTime = <span class="number">0</span>;</div><div class="line">    <span class="keyword">var</span> isMove = <span class="literal">false</span>;</div><div class="line">    dom.addEventListener(<span class="string">'touchstart'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">        startTime = <span class="built_in">Date</span>.now();</div><div class="line">    &#125;);</div><div class="line">    dom.addEventListener(<span class="string">'touchmove'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">        isMove = <span class="literal">true</span>;</div><div class="line">    &#125;);</div><div class="line">    dom.addEventListener(<span class="string">'touchend'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</div><div class="line">        <span class="keyword">if</span> ((<span class="built_in">Date</span>.now() - startTime) &lt; <span class="number">150</span> &amp;&amp; !isMove) &#123;</div><div class="line">            callback &amp;&amp; callback.call(<span class="keyword">this</span>, e);</div><div class="line">        &#125;</div><div class="line">        startTime = <span class="number">0</span>;</div><div class="line">        isMove = <span class="literal">false</span>;</div><div class="line">    &#125;);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>第二种解决方案：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="comment">&lt;!--</span></div><div class="line"><span class="comment">1 使用一个叫：fastclick.js 提供移动端click响应速度的</span></div><div class="line"><span class="comment">2 下载：https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js</span></div><div class="line"><span class="comment">3 使用：</span></div><div class="line"><span class="comment">--&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"../js/fastclick.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">/*当页面的dom元素加载完成 如果使用jquery $(function()&#123;&#125;);*/</span></span></div><div class="line"><span class="javascript">    <span class="built_in">document</span>.addEventListener(<span class="string">'DOMContentLoaded'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></div><div class="line"><span class="javascript">        <span class="comment">/*初始化方法*/</span></span></div><div class="line"><span class="javascript">        FastClick.attach(<span class="built_in">document</span>.body);</span></div><div class="line"><span class="javascript">    &#125;, <span class="literal">false</span>);</span></div><div class="line"><span class="javascript">    <span class="comment">/*正常使用click事件就可以了*/</span></span></div><div class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure></p>
<h5 id="衍生的swipe事件"><a href="#衍生的swipe事件" class="headerlink" title="衍生的swipe事件"></a>衍生的swipe事件</h5><p>手势事件：滑动，左滑，右滑，上滑，下滑 （swipe在移动端库zepto.js有使）<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/*1. 理解移动端的手势事件*/</span></div><div class="line"><span class="comment">/*2. swipe swipeLeft swipeRight swipeUp swipeDown */</span></div><div class="line"><span class="comment">/*3. 左滑和右滑手势怎么实现*/</span></div><div class="line"><span class="keyword">var</span> bindSwipeEvent = <span class="function"><span class="keyword">function</span> (<span class="params">dom,leftCallback,rightCallback</span>) </span>&#123;</div><div class="line">    <span class="comment">/*手势的条件*/</span></div><div class="line">    <span class="comment">/*1.必须滑动过*/</span></div><div class="line">    <span class="comment">/*2.滑动的距离50px*/</span></div><div class="line">    <span class="keyword">var</span> isMove = <span class="literal">false</span>;</div><div class="line">    <span class="keyword">var</span> startX = <span class="number">0</span>;</div><div class="line">    <span class="keyword">var</span> distanceX = <span class="number">0</span>;</div><div class="line">    dom.addEventListener(<span class="string">'touchstart'</span>,<span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</div><div class="line">        startX = e.touches[<span class="number">0</span>].clientX;</div><div class="line">    &#125;);</div><div class="line">    dom.addEventListener(<span class="string">'touchmove'</span>,<span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</div><div class="line">        isMove = <span class="literal">true</span>;</div><div class="line">        <span class="keyword">var</span> moveX = e.touches[<span class="number">0</span>].clientX;</div><div class="line">        distanceX = moveX - startX;</div><div class="line">    &#125;);</div><div class="line">    dom.addEventListener(<span class="string">'touchend'</span>,<span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</div><div class="line">        <span class="comment">/*滑动结束*/</span></div><div class="line">        <span class="keyword">if</span>(isMove &amp;&amp; <span class="built_in">Math</span>.abs(distanceX) &gt; <span class="number">50</span>)&#123;</div><div class="line">            <span class="keyword">if</span>(distanceX &gt; <span class="number">0</span>)&#123;</div><div class="line">                rightCallback &amp;&amp; rightCallback.call(<span class="keyword">this</span>,e);</div><div class="line">            &#125;<span class="keyword">else</span>&#123;</div><div class="line">                leftCallback &amp;&amp; leftCallback.call(<span class="keyword">this</span>,e);</div><div class="line">            &#125;</div><div class="line">        &#125;</div><div class="line">        <span class="comment">/*重置参数*/</span></div><div class="line">        isMove = <span class="literal">false</span>;</div><div class="line">        startX = <span class="number">0</span>;</div><div class="line">        distanceX = <span class="number">0</span>;</div><div class="line">    &#125;);</div><div class="line">&#125;</div><div class="line">bindSwipeEvent(<span class="built_in">document</span>.querySelector(<span class="string">'.box'</span>),<span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(<span class="string">'左滑手势'</span>);</div><div class="line">&#125;,<span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(<span class="string">'右滑手势'</span>);</div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<h5 id="分类页布局"><a href="#分类页布局" class="headerlink" title="分类页布局"></a>分类页布局</h5><p>代码见案例《jdM》</p>
<h5 id="区域滚动插件"><a href="#区域滚动插件" class="headerlink" title="区域滚动插件"></a>区域滚动插件</h5><p>IScroll是一个类，每个需要使用滚动功能的区域均要进行初始化，参考文档 <a href="http://www.mamicode.com/info-detail-331827.html" target="_blank" rel="external">http://www.mamicode.com/info-detail-331827.html</a></p>
<h3 id="《微金所项目》"><a href="#《微金所项目》" class="headerlink" title="《微金所项目》"></a>《微金所项目》</h3><h5 id="什么是响应式布局"><a href="#什么是响应式布局" class="headerlink" title="什么是响应式布局"></a>什么是响应式布局</h5><ul>
<li>在移动互联日益成熟的时候，我们在桌面浏览器上开发的网页已经无法满足移动设备的阅读。</li>
<li>通常的做法是针对移动端单独做一套特定的版本。</li>
<li>但是如果终端越来越多那么你需要开发的版本就会越来越多（大屏移动设备普及）。</li>
<li>那么Ethan Marcotte在2010年5月份提出的一个概念，简而言之，<strong>就是一个网站能够兼容多个终端</strong>。</li>
</ul>
<h5 id="为什么要学响应式"><a href="#为什么要学响应式" class="headerlink" title="为什么要学响应式"></a>为什么要学响应式</h5><ul>
<li>现在的移动设备屏幕越来越大，种类越来越多。</li>
<li>越来越多的设计师也采用了这种设计。</li>
<li>在新建站的一些网站现在普遍采用的响应式开发。</li>
</ul>
<h5 id="响应式的原理"><a href="#响应式的原理" class="headerlink" title="响应式的原理"></a>响应式的原理</h5><p>CSS3中的Media Query（媒体查询）<br><strong>通过查询screen的宽度来指定某个宽度区间的网页布局。</strong></p>
<table>
<thead>
<tr>
<th>划分设备</th>
<th>尺寸区间</th>
</tr>
</thead>
<tbody>
<tr>
<td>超小屏幕（手机）</td>
<td>768px以下</td>
</tr>
<tr>
<td>小屏设备</td>
<td>768px-992px</td>
</tr>
<tr>
<td>中等屏幕</td>
<td>992px-1200px</td>
</tr>
<tr>
<td>宽屏设备</td>
<td>1200px以上</td>
</tr>
</tbody>
</table>
<h5 id="对比移动端开发"><a href="#对比移动端开发" class="headerlink" title="对比移动端开发"></a>对比移动端开发</h5><table>
<thead>
<tr>
<th>开发方式</th>
<th>移动web开发+PC开发</th>
<th>响应式开发</th>
</tr>
</thead>
<tbody>
<tr>
<td>应用场景</td>
<td>一般在已经有PC端的网站，开发移动站的时候，只需单独开发移动端</td>
<td>针对新建站的一些网站，现在要求适配移动端，所以就一套页面兼容各种终端，灵活</td>
</tr>
<tr>
<td>开发</td>
<td>针对性强，开发效率高</td>
<td>兼容各种终端，效率低</td>
</tr>
<tr>
<td>适配</td>
<td>只适配 移动设备，pad上体验相对较差</td>
<td>可以适配各种终端</td>
</tr>
<tr>
<td>效率</td>
<td>代码简洁，加载快</td>
<td>代码相对复杂，加载慢</td>
</tr>
</tbody>
</table>
<p><strong>总结：</strong><br>移动web开发和响应式开发都是现在主流的开发模式。<br>使用的都是流式布局，来适配不同设备。<br>由于终端设备的多样化，新建站的站点会优先用响应式来开发。  </p>
<h5 id="响应式框架bootstrap"><a href="#响应式框架bootstrap" class="headerlink" title="响应式框架bootstrap"></a>响应式框架bootstrap</h5><ul>
<li>简介：  <ul>
<li>作者：Twitter  公司两位前端工程师（mark otto &amp;&amp; jacob thornton）在2011发起开发完成的。</li>
<li>特点：组件简洁大方，代码规范精简，界面自定义性强。</li>
<li>目的：提高web开发效率。  </li>
</ul>
</li>
<li>文档：  <ul>
<li>中文官网  <a href="http://www.bootcss.com/" target="_blank" rel="external">http://www.bootcss.com/</a></li>
<li>官网 <a href="http://getbootstrap.com/" target="_blank" rel="external">http://getbootstrap.com/</a></li>
<li>学习文档 <a href="http://bootstrap.css88.com/" target="_blank" rel="external">http://bootstrap.css88.com/</a>  </li>
</ul>
</li>
<li>优点：  <ul>
<li>有自己的生态圈，不断的更新迭代。</li>
<li>提供了一套简洁、直观、强悍的组件。</li>
<li>标准化的html+css编码规范。</li>
<li>让开发更简单，提高了开发的效率。</li>
<li><strong>注意：虽然界面组件样式已经定义好了，但是扩展性相对较强，也就是说我们还可以自定义，修改默认样式。</strong></li>
</ul>
</li>
<li>版本:  <ul>
<li>2.x.x  停止维护,兼容性好,代码不够简洁，功能不够完善。</li>
<li>3.x.x  目前使用最多,稳定,但是放弃了IE6-IE7。对IE8支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的 WEB 项目。</li>
<li>4.x.x  测试阶段,更偏响应式，移动设备。</li>
</ul>
</li>
</ul>
<h5 id="使用bootstrap"><a href="#使用bootstrap" class="headerlink" title="使用bootstrap"></a>使用bootstrap</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div></pre></td><td class="code"><pre><div class="line"><span class="comment">&lt;!--h5文档申明--&gt;</span></div><div class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></div><div class="line"><span class="comment">&lt;!--文档语言申明  en zh-CN zh-tw --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"zh-CN"</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!--文档编码申明--&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!--要求当前网页使用浏览器最高版本的内核来渲染--&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"IE=edge"</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放--&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1, user-scalable=0"</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --&gt;</span></div><div class="line">    <span class="comment">&lt;!-- 优先加载和浏览器解释 --&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>title<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="comment">&lt;!-- Bootstrap 核心样式--&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"../lib/bootstrap/css/bootstrap.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!-- html5shiv 和  respond 分别用来解决IE8版本浏览器不支持 H5标签和媒体查询的  不兼容问题--&gt;</span></div><div class="line">    <span class="comment">&lt;!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries --&gt;</span></div><div class="line">    <span class="comment">&lt;!-- 警告：不能以file形式打开，本地打开。最好http://打开 --&gt;</span></div><div class="line">    <span class="comment">&lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;</span></div><div class="line">    <span class="comment">&lt;!-- 在 IE 9 一下引入--&gt;</span></div><div class="line">    <span class="comment">&lt;!--[if lt IE 9]&gt;</span></div><div class="line"><span class="comment">    &lt;script src="../lib/html5shiv/html5shiv.min.js"&gt;&lt;/script&gt;</span></div><div class="line"><span class="comment">    &lt;script src="../lib/respond/respond.min.js"&gt;&lt;/script&gt;</span></div><div class="line"><span class="comment">    &lt;![endif]--&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line"><span class="comment">&lt;!--TODO--&gt;</span></div><div class="line"><span class="comment">&lt;!-- bootstrap依赖jquery--&gt;</span></div><div class="line"><span class="comment">&lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"../lib/jquery/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="comment">&lt;!-- bootstrap js 核心文件--&gt;</span></div><div class="line"><span class="comment">&lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"../lib/bootstrap/js/bootstrap.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
<h5 id="微金所首页开发"><a href="#微金所首页开发" class="headerlink" title="微金所首页开发"></a>微金所首页开发</h5><p>代码见案例《微金所项目》</p>
<h5 id="less安装"><a href="#less安装" class="headerlink" title="less安装"></a>less安装</h5><ol>
<li>安装nodejs <a href="https://nodejs.org/dist/" target="_blank" rel="external">https://nodejs.org/dist/</a> 可选择版本(6.0)。</li>
<li>检查是否安装成功，使用cmd命令 node -v 查看版本即可。</li>
<li>基于nodejs安装less:<ul>
<li>在线安装：使用cmd命令 npm install -g less</li>
<li>离线安装:<br>a.找到C盘根目录下的用户或User文件夹打开<br>b.找到当前计算机使用的用户文件夹打开<br>c.找到隐藏文件夹AppData打开<br>d.找到Roaming文件夹打开<br>e.找到npm文件夹打开，该文件夹为基于nodejs程序目录<br>f.把npm.zip文件解压到该目录  </li>
</ul>
</li>
</ol>
<h5 id="less简介"><a href="#less简介" class="headerlink" title="less简介"></a>less简介</h5><p>作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。</p>
<h5 id="less编译"><a href="#less编译" class="headerlink" title="less编译"></a>less编译</h5><p>本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">lessc 目标文件地址 生成文件地址</div></pre></td></tr></table></figure></p>
<p>在开发过程当中如果要预览less，每次都要执行编译命令，为了方便可以使用部分编辑器中less自动编译功能。</p>
<ol>
<li>点击文件打开菜单，选择设置选项</li>
<li>选择工具当中的文件监听选项</li>
<li>点击右上角加号按钮，选择less后弹出对话框，点击确定即可。</li>
</ol>
<h5 id="less基本语法"><a href="#less基本语法" class="headerlink" title="less基本语法"></a>less基本语法</h5><ul>
<li><p>变量</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="variable">@mainColor:</span><span class="number">#e92323</span>;</div><div class="line"><span class="variable">@className:</span>box;</div><div class="line"></div><div class="line"><span class="selector-tag">div</span>&#123;</div><div class="line">  <span class="attribute">background</span>: <span class="variable">@mainColor</span>;</div><div class="line">&#125;</div><div class="line"><span class="attribute">a</span>:hover&#123;</div><div class="line">  <span class="attribute">color</span>: <span class="variable">@mainColor</span>;</div><div class="line">&#125;</div><div class="line"><span class="comment">//变量用于字符拼接使用方法</span></div><div class="line"><span class="selector-class">.@&#123;className&#125;</span>&#123;</div><div class="line">  <span class="attribute">color</span>: <span class="variable">@mainColor</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
<li><p>混入(mixin)</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.borderRadius</span>(<span class="variable">@width</span>:<span class="number">100px</span>)&#123;</div><div class="line">  <span class="attribute">border-radius</span>: <span class="variable">@width</span>;</div><div class="line">  <span class="attribute">-webkit-border-radius</span>:<span class="variable">@width</span>;</div><div class="line">  <span class="attribute">-moz-border-radius</span>:<span class="variable">@width</span>;</div><div class="line">  <span class="attribute">-o-border-radius</span>:<span class="variable">@width</span>;</div><div class="line">  <span class="attribute">-ms-border-radius</span>:<span class="variable">@width</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
<li><p>嵌套</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.wjs_app</span>&#123;</div><div class="line">  <span class="attribute">display</span>: block;</div><div class="line">  <span class="selector-tag">img</span>&#123;</div><div class="line">    <span class="attribute">display</span>: none;</div><div class="line">  &#125;</div><div class="line">  <span class="comment">/*需要连接的情况：&amp;*/</span></div><div class="line">  <span class="selector-tag">&amp;</span><span class="selector-pseudo">:hover</span>&#123;</div><div class="line">    <span class="selector-tag">img</span>&#123;</div><div class="line">      <span class="attribute">display</span>: block;</div><div class="line">      <span class="attribute">position</span>: absolute;</div><div class="line">      <span class="attribute">left</span>: <span class="number">50%</span>;</div><div class="line">      <span class="attribute">margin-left</span>:-<span class="number">60px</span>;</div><div class="line">      <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#ccc</span>;</div><div class="line">      <span class="attribute">border-top</span>: none;</div><div class="line">      <span class="attribute">top</span>:<span class="number">40px</span>;</div><div class="line">      <span class="attribute">z-index</span>: <span class="number">100000</span>;</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">  &gt; <span class="selector-tag">div</span>&#123;</div><div class="line">    <span class="attribute">display</span>: block;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
<li><p>导入</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">@import &quot;variables&quot;;</div></pre></td></tr></table></figure>
</li>
<li><p>运算&amp;内置函数</p>
</li>
</ul>
<p>api地址：<a href="http://lesscss.cn/functions/#functions-overview" target="_blank" rel="external">http://lesscss.cn/functions/#functions-overview</a></p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/*运算*/</span></div><div class="line"><span class="variable">@num:</span><span class="number">5</span>;</div><div class="line"><span class="selector-tag">ul</span>&#123;</div><div class="line">  <span class="attribute">width</span>: <span class="number">100%</span>*<span class="variable">@num</span>;</div><div class="line">  <span class="selector-tag">li</span>&#123;</div><div class="line">    <span class="attribute">width</span>: <span class="number">100%</span>/<span class="variable">@num</span>;</div><div class="line">    <span class="attribute">color</span>: red+yellow+blue;</div><div class="line">    <span class="attribute">background</span>: gray*<span class="number">0.3</span>;</div><div class="line">    <span class="comment">/*内置函数*/</span></div><div class="line">    <span class="attribute">border-color</span>: darken(red,<span class="number">20%</span>);</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h5 id="bootstrap定制"><a href="#bootstrap定制" class="headerlink" title="bootstrap定制"></a>bootstrap定制</h5><ol>
<li>线下定制：更改源码，重新编译。</li>
<li>线上定制：官方网站，定制功能。</li>
</ol>
<h3 id="《苏宁项目》"><a href="#《苏宁项目》" class="headerlink" title="《苏宁项目》"></a>《苏宁项目》</h3><h5 id="rem适配原理"><a href="#rem适配原理" class="headerlink" title="rem适配原理"></a>rem适配原理</h5><ul>
<li>rem 是相对于页面根源素html的字体大小的一个尺寸单位</li>
<li>页面内容可以使用rem为单位，那么html的字体大小就是一个控制尺寸的开关</li>
<li>当设备改变的时候可以根据设备的宽度和原本设计稿的尺寸比例关系设置html的字体大小</li>
<li>这样凡是以rem为单位的内容会根据设备做等比适配</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">1.假设设计稿是750px</div><div class="line">2.假设这个时候html字体大小为100px</div><div class="line">3.那么在320px设备的时候  字体大小为 100/750*320</div><div class="line">4.只要根据这个比例在不同设备设置rem基准值(html字体大小)即可</div><div class="line">5.改变rem基准值有两种方式：媒体查询或javascript</div></pre></td></tr></table></figure>
<h5 id="flexible-js-rem适配方案"><a href="#flexible-js-rem适配方案" class="headerlink" title="flexible.js + rem适配方案"></a>flexible.js + rem适配方案</h5><ul>
<li>flexible.js 是手机淘宝团队做移动端适配的库</li>
<li>我们使有它的目的只有一个根据设备设置rem基准值</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, user-scalable=no, initial-scale=.0"</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"flexible.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<h5 id="media-query-rem适配方案"><a href="#media-query-rem适配方案" class="headerlink" title="media query + rem适配方案"></a>media query + rem适配方案</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/*假设的设备  320px 414px 640px */</span></div><div class="line">@<span class="keyword">media</span> (min-width: <span class="number">320px</span>) &#123;</div><div class="line">    <span class="selector-tag">html</span>&#123;</div><div class="line">        <span class="attribute">font-size</span>: <span class="number">50px</span>;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line">@<span class="keyword">media</span> (min-width: <span class="number">414px</span>) &#123;</div><div class="line">    <span class="selector-tag">html</span>&#123;</div><div class="line">        <span class="attribute">font-size</span>: <span class="number">64.6875px</span>;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line">@<span class="keyword">media</span> (min-width: <span class="number">640px</span>) &#123;</div><div class="line">    <span class="selector-tag">html</span>&#123;</div><div class="line">        <span class="attribute">font-size</span>: <span class="number">100px</span>;</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h5 id="基于less的rem可维护适配方案"><a href="#基于less的rem可维护适配方案" class="headerlink" title="基于less的rem可维护适配方案"></a>基于less的rem可维护适配方案</h5><figure class="highlight less"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//适配主流设备十几种</span></div><div class="line"><span class="variable">@adapterDeviceList:</span><span class="number">750px</span>,<span class="number">720px</span>,<span class="number">640px</span>,<span class="number">540px</span>,<span class="number">480px</span>,<span class="number">424px</span>,<span class="number">414px</span>,<span class="number">400px</span>,<span class="number">384px</span>,<span class="number">375px</span>,<span class="number">360px</span>,<span class="number">320px</span>;</div><div class="line"><span class="comment">//设计稿尺寸</span></div><div class="line"><span class="variable">@psdWidth:</span><span class="number">750px</span>;</div><div class="line"><span class="comment">//预设基准值</span></div><div class="line"><span class="variable">@baseFontSize:</span><span class="number">100px</span>;</div><div class="line"><span class="comment">//设备的种类</span></div><div class="line"><span class="variable">@len:</span>length(<span class="variable">@adapterDeviceList</span>);</div><div class="line"><span class="comment">//适配函数</span></div><div class="line"><span class="selector-class">.adapterMixin</span>(<span class="variable">@index</span>) <span class="keyword">when</span> ( <span class="variable">@index</span> &gt; <span class="number">0</span>)&#123;</div><div class="line">  <span class="keyword">@media</span> (<span class="attribute">min-width</span>: extract(<span class="variable">@adapterDeviceList</span>,<span class="variable">@index</span>))&#123;</div><div class="line">    <span class="selector-tag">html</span>&#123;</div><div class="line">      <span class="attribute">font-size</span>: <span class="variable">@baseFontSize</span> / <span class="variable">@psdWidth</span> * extract(<span class="variable">@adapterDeviceList</span>,<span class="variable">@index</span>);</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">  <span class="selector-class">.adapterMixin</span>( <span class="variable">@index</span> - <span class="number">1</span>);</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<h5 id="在浏览器使用less开发"><a href="#在浏览器使用less开发" class="headerlink" title="在浏览器使用less开发"></a>在浏览器使用less开发</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Title<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">type</span>=<span class="string">"text/less"</span> <span class="attr">href</span>=<span class="string">"index.less"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"less.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="undefined">        less.watch();</span></div><div class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!--1.在浏览器端直接使用less文件预览 type="text/less" --&gt;</span></div><div class="line">    <span class="comment">&lt;!--2.浏览器无法直接使用less类型的文件，无法解析--&gt;</span></div><div class="line">    <span class="comment">&lt;!--3.转换成css,需要js插件支持--&gt;</span></div><div class="line">    <span class="comment">&lt;!--4.下载插件 https://github.com/less/less.js/tree/master/dist --&gt;</span></div><div class="line">    <span class="comment">&lt;!--5.less.js会异步加载less文件的内容，再去解析成css,然后追加到style--&gt;</span></div><div class="line">    <span class="comment">&lt;!--6.必须使用HTTP形式打开页面，不要以file形式打开--&gt;</span></div><div class="line">    <span class="comment">&lt;!--7.更改完成之后每次要刷新，可以配置less监听，自动刷新页面预览--&gt;</span></div><div class="line">    <span class="comment">&lt;!--8.需要js配置 less.watch() --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box2"</span>&gt;</span>test<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
<h5 id="苏宁首页开发"><a href="#苏宁首页开发" class="headerlink" title="苏宁首页开发"></a>苏宁首页开发</h5><p>参考代码《苏宁项目》</p>
<h5 id="zeptojs的使用"><a href="#zeptojs的使用" class="headerlink" title="zeptojs的使用"></a>zeptojs的使用</h5><ul>
<li>Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。</li>
<li>Zepto模块</li>
</ul>
<table>
<thead>
<tr>
<th>module</th>
<th>default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>zepto</td>
<td>✔</td>
<td>核心模块；包含许多方法</td>
</tr>
<tr>
<td>event</td>
<td>✔</td>
<td>通过on()&amp; off()处理事件</td>
</tr>
<tr>
<td>ajax</td>
<td>✔</td>
<td>XMLHttpRequest 和 JSONP 实用功能</td>
</tr>
<tr>
<td>form</td>
<td>✔</td>
<td>序列化 &amp; 提交web表单</td>
</tr>
<tr>
<td>ie</td>
<td>✔</td>
<td>增加支持桌面的Internet Explorer 10+和Windows Phone 8。</td>
</tr>
<tr>
<td>detect</td>
<td></td>
<td>提供 $.os和 $.browser消息</td>
</tr>
<tr>
<td>fx</td>
<td></td>
<td>The animate()方法</td>
</tr>
<tr>
<td>fx_methods</td>
<td></td>
<td>以动画形式的 show, hide, toggle, 和 fade*()方法.</td>
</tr>
<tr>
<td>assets</td>
<td></td>
<td>实验性支持从DOM中移除image元素后清理iOS的内存。</td>
</tr>
<tr>
<td>data</td>
<td></td>
<td>一个全面的 data()方法, 能够在内存中存储任意对象。</td>
</tr>
<tr>
<td>deferred</td>
<td></td>
<td>提供 $.Deferredpromises API. 依赖”callbacks” 模块. 当包含这个模块时候, $.ajax() 支持promise接口链式的回调。</td>
</tr>
<tr>
<td>callbacks</td>
<td></td>
<td>为”deferred”模块提供 $.Callbacks。</td>
</tr>
<tr>
<td>selector</td>
<td></td>
<td>实验性的支持 jQuery CSS 表达式 实用功能，比如 $(‘div:first’)和 el.is(‘:visible’)。</td>
</tr>
<tr>
<td>touch</td>
<td></td>
<td>在触摸设备上触发tap– 和 swipe– 相关事件。这适用于所有的<code>touch</code>(iOS, Android)和<code>pointer</code>事件(Windows Phone)。</td>
</tr>
<tr>
<td>gesture</td>
<td></td>
<td>在触摸设备上触发 pinch 手势事件。</td>
</tr>
<tr>
<td>stack</td>
<td></td>
<td>提供 andSelf&amp; end()链式调用方法</td>
</tr>
<tr>
<td>ios3</td>
<td></td>
<td>String.prototype.trim 和 Array.prototype.reduce 方法 (如果他们不存在) ，以兼容 iOS 3.x.</td>
</tr>
</tbody>
</table>
<ul>
<li>打包Zepto常用模块</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">1、首先在自己的电脑上要安装Node.js和npm包管理工具；</div><div class="line">2、从github上下载zepto.js的源文件包到本地磁盘（例如：E:\Learning\JS）；地址：https://github.com/madrobby/zepto</div><div class="line">3、将下载的zepto压缩包解压，进入，找到make文件，打开，找到第42行的位置，添加需要的模块名称（这里增加了fx_methods 和 fx 模块），以空格做分隔；</div><div class="line">4、运行中，cmd打开命令窗口，并进入zepto文件目录；</div><div class="line">5、执行 npm install 命令；</div><div class="line">6、输入npm run-script dist 命令，进行构建；</div></pre></td></tr></table></figure>
<h5 id="swiper插件使用"><a href="#swiper插件使用" class="headerlink" title="swiper插件使用"></a>swiper插件使用</h5><p>参考文档：<a href="http://www.swiper.com.cn/usage/index.html" target="_blank" rel="external">http://www.swiper.com.cn/usage/index.html</a></p>

          
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
  </section>

  


          </div>
          


          

        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      

      <section class="site-overview-wrap sidebar-panel sidebar-panel-active">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">Tony zhou</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives">
              
                  <span class="site-state-item-count">1</span>
                  <span class="site-state-item-name">Artikel</span>
                </a>
              </div>
            

            

            

          </nav>

          

          <div class="links-of-author motion-element">
            
          </div>

          
          

          
          

          

        </div>
      </section>

      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="copyright">&copy; <span itemprop="copyrightYear">2017</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Tony zhou</span>

  
</div>









        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  


  











  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  

  
  
    <script type="text/javascript" src="/lib/canvas-nest/canvas-nest.min.js"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.3"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.3"></script>



  
  

  

  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.3"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  

  

</body>
</html>
